<template>
	<view class="shop">
		<!-- <com-nav :list="typeList"></com-nav> -->
		<comNavObj v-model="formDate.goodsTypeIds" @change="typeChange" :list="typeList" :default-props="{label: 'type', value: 'id'}"></comNavObj>
		<view class="padding-sm">
			<view class="bg-white item flex padding-xs" v-for="v in goodsList" @click="goto('/pages/shop/detail/index?id=' + v.id)">
				<view>
					<image v-if="v.imagePath" class="myImage" :src="config.url + '/lsqApi' + v.imagePath.split(',')[0]"></image>
					<image v-else class="myImage" src="../../static/logo.png"></image>
				</view>
				<view class="margin-left-sm" style="flex: 1;">
					<view class="title text-bold text-ellipsis">{{v.name}}</view>
					<view class="text-xs text-gray margin-top-xs">{{v.ms}}</view>
					<view class="flex justify-between bottomEa">
						<view class="text-red text-lg" v-if="v.type == 2">￥{{v.price}} 积分</view>
						<view class="text-orange text-lg" v-else>￥{{v.price}} 绑定积分</view>
						<button class="cu-btn round bg-gradual-orange sm">立即兑换</button>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="flex padding-left-sm" style="flex-wrap: wrap;">
			<view class="bg-white item">
				<view>
					<image src="../../static/zcb/24.png" class="myImage"></image>
					<view class="margin-top-xs">
						<view class="text-ellipsis">食用盐食用盐食用盐食用盐食用盐食用盐</view>
						<view class="flex justify-between margin-top-xs">
							<view class="text-orange text-bold">￥20积分</view>
							<view class="cu-tag line-orange radius">一级</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white item"></view>
			<view class="bg-white item"></view>
		</view> -->
	</view>
</template>

<script>
	import comNavObj from "../../components/comNavObj.vue"
	import productApi from "../../api/new/productApi.js"
	// import comCuPicker from "../../components/comCuPicker.vue"
	import config from "../../config"
	export default{
		components: {
			comNavObj
		},
		data() {
			return {
				config: config,
				TabCur: 0,
				list: ['最新','价格'],
				goodsList: [],
				typeList: "",
				formDate: {
					type: ""
				}
			}
		},
		onShow() {
			this.getGoodsList()
			this.getGoodTypeList()
		},
		methods: {
			getGoodTypeList() {
				productApi.getGoodTypeList().then(res => {
					this.typeList = [{type: "全部", id: "", goodsTypeIds: []}, ...res.rows]
				})
			},
			getGoodsList() {
				if (!this.formDate.goodsTypeIds) {
					delete this.formDate.goodsTypeIds
				}
				productApi.list({
					...this.formDate,
					pageSize: 100,
					pageNum: 1
				}).then(res => {
					this.goodsList = res.rows
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			typeChange() {
				this.getGoodsList()
			}
		}
	}
</script>

<style lang="scss">
	.shop{
		.item{
			height: 200rpx;
			border-radius: 10rpx;
			margin-bottom: 4rpx;
			position: relative;
			.myImage{
				width: 180rpx;
				height: 180rpx;
			}
			.bottomEa{
				width: 480rpx;
				position: absolute;
				bottom: 10rpx;
			}
		}
	}
</style>